<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖系统</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="shortcut icon" href="./cj.webp" type="image/x-icon">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        .delete-section {
            display: none; 
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>抽奖系统</h1>
       <div class="wrap">
        <div class="left">
            <!-- 抽奖信息 -->
            <div class="stats-section">
               <div class="stats-info">
                   <span>已中奖人数：<span id="totalWinners">0</span></span>
                   <span>未中奖人数：<span id="remainingCount">10000</span></span>
               </div>
               <div class="current-draw-info">
                   本次中奖人数：<span id="currentDrawCount">10</span>
               </div>
           </div>
           <!-- 抽奖区域 -->
           <div class="lottery-section">
               <div class="lottery-controls">
                   <div class="number-input">
                       <input type="number" id="customCount" placeholder="本次中奖数量" min="1" max="100" value="10">
                   </div>
                   <button id="drawButton" class="primary-button">开始抽奖</button>
                   <button id="clearBtn" class="primary-button">清除中奖记录</button>
               </div>
               <!-- 抽奖动画区域 -->
               <div id="lotteryAnimation" class="lottery-animation"></div>
               <!-- 抽奖提示信息区域 -->
               <div id="result" class="result-section"></div>
           </div>
          </div>
           <div class="right">
               <!-- 中奖记录 -->
           <div class="records-section">
               <h2>中奖记录</h2>
               <div class="records-controls">
                   <button id="exportButton" class="secondary-button">导出记录</button>
                   <div class="batch-selector">
                       <select id="batchSelect" class="batch-select">
                           <option value="">请选择抽奖批次</option>
                       </select>
                   </div>
               </div>
               <div id="recordsList" class="records-list"></div>
           </div>
           <!-- 删除记录 -->
           <div class="delete-section">
               <h2>删除记录</h2>
               <div class="delete-form">
                   <input type="number" id="deleteNumber" placeholder="输入要删除的号码" min="1" max="10000">
                   <button id="deleteButton" class="secondary-button">删除</button>
               </div>
           </div>
           </div>
       </div>
    </div>
    <script src="./script.js"></script>
</body>
</html> 